<template>
  <div class="containerDiv">
    <el-row class="import">
      <el-col style="display: flex;align-items: center;">
        <el-radio-group v-model="style" @change="styleChange">
          <el-radio value="stl" size="large">stl模型</el-radio>
          <!-- <el-radio value="model-box" size="large">modelbox-sdk转换</el-radio> -->
          <el-radio value="ottc" size="large">ottc-step转换</el-radio>
        </el-radio-group>
        <input id="fileInput" type="file" @change="handleFileUpload" style="margin-left:40px" />
        <el-button @click="dragSwitch" size="small" style="margin-left:40px">拖动:{{ dragStatus ? "开" : "关" }}</el-button>
      </el-col>
    </el-row>
    <div class="meshList">
      <div v-for="(item, index) in meshList" :key="index" class="meshItem">mesh{{ index + 1 }}
        <div @click="setMeshVisible(index)" class="visible"
          :style="{ backgroundColor: item.visible ? 'aqua' : 'white' }"></div>
      </div>
    </div>
    <div ref="container" class="scene-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { initThree, readStepFile, dispose, stlLoader, initDragControls, setVisible } from "../utils/threeHandle"

const container = ref(null)
let scene, camera, renderer, controls
const style = ref("ottc")//model-box\stl\ottc
let dragObjct = undefined
const dragStatus = ref(false)
const meshList = ref([])
const isStep = ref(true)
onMounted(() => {
  initThree(container)
  dragObjct = initDragControls()
})

const handleFileUpload = async (event) => {
  const input = event.target
  if (!input.files?.length) return
  const file = input.files[0]
  if (style.value == "ottc") {
    let hasEdges = true
    meshList.value = await readStepFile(file, hasEdges)
  } else {
    // 解析STL文件
    // if (style.value == "stl") {
    await stlLoader(file)
    // } else if (style.value == "model-box") {
    //   await ModelBox(file)
    // }
  }
}
onBeforeUnmount(() => {
  // 清理资源
  dispose()
})
const styleChange = () => {
  document.getElementById('fileInput').value = '';
  if (style.value == "ottc") {
    isStep.value = true
  } else {
    isStep.value = false
  }
}
const dragSwitch = () => {
  if (dragStatus.value) {
    dragObjct.disabledDrag()
  } else {
    dragObjct.abledDrag(isStep.value)
  }
  dragStatus.value = !dragStatus.value
}
const setMeshVisible = (index) => {
  let uuid = meshList.value[index].uuid
  setVisible(uuid, !meshList.value[index].visible)
  meshList.value[index].visible = !meshList.value[index].visible
}
</script>

<style scoped lang="scss">
.containerDiv {
  width: 100%;
  height: 100%;
  position: relative;

  .import {
    height: 40px;
  }

  .meshList {
    position: absolute;
    left: 0px;
    top: 40px;
    width: 150px;
    background-color: white;
    max-height: 300px;
    overflow: auto;

    .meshItem {
      display: flex;
      padding: 6px 20px;
      align-items: center;
      justify-content: space-between;
    }

    .visible {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: aqua;
      border: 1px solid #eee444
    }
  }

  .scene-container {
    width: 100%;
    height: calc(100vh - 40px);
  }
}
</style>